<template>

  <div>
    <!--    顶部-->
    <div style="width: 100%;height: 80px;">
        <span style="float: left;margin-top: 25px;margin-left: 15px;font-size: 35px" @click="towalletindex">
          &lt;
        </span>
      <span style="float: right;margin-top: 25px;margin-right: 150px;font-size: 25px;font-weight: bold">
        免密支付
        </span>
    </div>
    <!--    中间部分-->
    <div style="width: 100%;height: 833px;background:#f3fcff; overflow-y: auto;">
      <!--      overflow-y: auto;-->
      <div style="width: 360px;height: 800px;background: #f3fcff;margin-left: 25px;margin-top: 20px;overflow-x: auto">
        <ul style="width: 360px;height: 620px;">
          <!--          <li style="width: 360px; height: 60px;border-bottom: #2c3e50 1px solid;" v-for="item in 15"-->
          <!--              :key="item.id">-->
          <!--            <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.jqqdL_s2bx0v6J2k6iq4AQAAAA?rs=1&pid=ImgDetMain"-->
          <!--                 alt="网络异常" style="width: 50px;height: 50px;float: left;margin-top: 5px;margin-left: 5px">-->
          <!--            <span-->
          <!--                style="float: left;margin-left: 10px;margin-top: 15px;font-size: 20px;font-weight: bold;">XXXXX银行</span>-->
          <!--            <span style="float: right;margin-top: 20px;margin-right: 20px;color: blue" @click="aaa">去开通</span>-->
          <!--            <span style="float: right;margin-top: 20px;margin-right: 20px;color: blue" @click="aaa">已开通</span>-->
          <!--          </li>-->
          <li style="width: 360px; height: 60px;border-bottom: #2c3e50 1px solid;" v-for="item in driversWallet"
              :key="item.id">
            <img :src="item.bankIcon"
                 alt="网络异常" style="width: 50px;height: 50px;float: left;margin-top: 5px;margin-left: 5px">
            <div style="width:160px;height: 60px;float: left;
                       overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;">
              <span
                  style="float: left;margin-left: 10px; margin-top: 15px;font-size: 15px;font-weight: bold;">{{
                  item.bankName
                }}</span>
            </div>
            <div style="width: 140px; height: 60px;float: right">
              <span style="float: right;margin-top: 20px;margin-right: 5px;color: blue" @click="toopenSecretfree(item)" v-if="item.passwordFreeStatus==0">去开通</span>
              <span style="float: right;margin-top: 20px;margin-right: 5px;color: blue" @click="aaa(item)" v-if="item.passwordFreeStatus==1">已开通</span>
              <span style="float: right;margin-top: 20px;margin-right: 5px;color: blue" @click="aaa(item)" v-if="item.precedenceStatus==1">优先支付</span>
            </div>


          </li>
        </ul>
      </div>
    </div>

    <div v-if="isBottomPopupVisible" style="position: absolute;position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 150px;
      background-color: blue;
      border-radius: 15px 15px 0 0;"

         :style="{ transform: divTransform }"
    >


      <div>
        <div style="width: 100%;height: 50px;background: white;text-align: center;line-height: 50px" @click="precedenceStatus()">
          <span style="">设置优先免密支付方式</span>
        </div>
        <div style="width: 100%;height: 50px;background: white;text-align: center;line-height: 50px" @click="open">
          关闭免密支付
        </div>
        <div style="width: 100%;height: 50px;background: #ffeedd;text-align: center;line-height: 50px"
             @click="isBottomPopupVisible=false">
          取消
        </div>
      </div>


    </div>
    <div style="">

    </div>
  </div>
</template>
<script>
import {Dialog} from "vant";
import {walletfindAll,updatepasswordFreeStatus,precedenceStatus} from "@/components/api/wallet/wallet";
// @zhaomingshuo
export default {
  data() {
    return {
      isBottomPopupVisible: false,
      divTransform: 'translateY(100%)',
      // 所有银行卡
      driversWallet: null,
      bankName: null,
      id:null,
      item: null,
      sss:null,

    };
  },
  methods: {
    // 跳转到钱包页面
    towalletindex() {
      this.$router.push({
        path: '/walletindex',
      })
    },
    // 去开通
    toopenSecretfree(item){
      this.$router.push({
        path:'/openSecretfree',
        query:{item:item}
      });
    },
    // 打开底部弹窗
    aaa(item) {
      this.bankName=item.bankName;
      this.item=item;
      this.isBottomPopupVisible = !this.isBottomPopupVisible;
      if (this.isBottomPopupVisible) {
        this.divTransform = 'translateY(0%)';
      } else {
        this.divTransform = 'translateY(100%)';
      }
    },
    // 设置优先支付
    precedenceStatus() {
      this.isBottomPopupVisible = false;
      // 调用接口
      precedenceStatus(this.item.id).then(res=>{
        if (res.code==200){
          this.$message({
            message: "设置优先级成功",
            type: 'success'
          });
          this.walletfindall();
        }
      });
    },

    // 点击关闭免密支付按钮
    open() {
      this.isBottomPopupVisible = false;
      Dialog.confirm({
        title: '提醒',
        // message: '确定关闭XXXX银行免密支付',
        message: '确定关闭'+this.bankName+'免密支付',

      })
          // 确认接单点击事件
          .then(() => {
            // 调用接口
            console.log(this.item.id)
            console.log(this.item.bankName)
            console.log("确定关闭"+this.bankName+"免密支付");

            updatepasswordFreeStatus(this.item.id).then(res=>{
                if (res.code==200&&res.data==1){
                  this.$message({
                    message: "关闭成功",
                    type: 'success'
                  });
                  this.walletfindall();
                }else{
                  this.$message({
                    message: "关闭失败",
                    type: 'success'
                  });
                }
            });
          })
          // 取消接单点击事件
          .catch(() => {
          });
    },
    // 查询该用户所有绑定的银行卡
    walletfindall() {
      var user = JSON.parse(window.localStorage.getItem("personalUser"));
      if (user == null) {
        this.$router.push({
          path: '/personalUser',
        })
        return;
      }
      walletfindAll(user.id).then(res => {
        // console.log(res)
        if (res.code == 200) {
          this.driversWallet = res.data;
          // console.log(res.data);
        } else {
          this.$message({
            message: "网络异常",
            type: 'error'
          });
        }
      })
    },
    // 判断是否是免密支付点进来的
    walletindexs(){
      this.item=this.$route.params.item;
      console.log(this.item,"111");
      if (this.item==null){
        return;
      }
      if (this.item!=null){
        this.bankName=this.item.bankName;
        this.isBottomPopupVisible = !this.isBottomPopupVisible;
        if (this.isBottomPopupVisible) {
          this.divTransform = 'translateY(0%)';
        } else {
          this.divTransform = 'translateY(100%)';
        }
      }else{
        this.$message({
          message: "网络异常",
          type: 'error'
        });
      }
    }
  },
  created() {
    this.walletindexs();
    this.walletfindall();

  }
};
</script>
<style>


</style>